<template>
  <div class="blogClassify_box">
    <div class="row">
      <!-- 分类列表 -->
      <div class="col-md-2" style="padding:0;">
        <div class="classify_list">
            <ul>
              <!-- {{this.$store.state.user.userInfo.username}} -->
              <li :class="['我的' == queryInfo.categories? 'active_li':'']" @click="changeCate('我的')">我的</li>
              <li :class="[item == queryInfo.categories? 'active_li':'']"  @click="changeCate(item)" v-for="(item,index) in classList" :key="index">
                {{item}}
              </li>
            </ul>
        </div>
      </div>

      <!-- 文章列表 -->
      <div class="col-md-10">
        <div
        v-infinite-scroll="loadMore"
        infinite-scroll-disabled="disabled"
        infinite-scroll-distance="10"
        >
          <div class="card_list"
          v-for="list in articleList" :key="list.article.id">

              <el-card >
                <h5>
                  <router-link class="card_title"
                    :to="{name:'BlogDetail', params:{blogId: list.article.id}}">
                      <span>{{list.article.title}}</span>
                  </router-link>
                </h5>
                <div class="card_detail">
                  <div class="rol">
                    <i class="el-icon-user"></i>
                    <span>作者</span>
                    <span>{{list.author}}</span>
                  </div>
                  <div class="rol">
                    <i class="el-icon-time"></i>
                    <span>发表于</span>
                    <span>{{list.article.created}}</span>
                  </div>
                  <div class="rol" style="border-right:1.2px solid #ccc;">
                    <i class="el-icon-s-unfold"></i>
                    <span >分类</span>
                    <span>{{list.article.categories}}</span>
                  </div>
                  <div class="rol" style="border-right:1.2px solid #ccc;">
                    <i class="el-icon-view"></i>
                    <span>阅读量</span>
                    <span>{{list.statistic.hits}}</span>
                  </div>
                  <div class="rol">
                    <i class="el-icon-chat-dot-round"></i>
                    <span>评论数</span>
                    <span>{{list.statistic.commentsNum}}</span>
                  </div>
                </div>
                <div class="card_desc">
                  <p>
                    {{list.article.smallText}}
                    <!-- {{list.article.content}} -->
                  </p>
                </div>
                <div>
                    <el-tag type="success">{{list.article.categories}}</el-tag>
                </div>
              </el-card>

          </div>
        </div>
        <!-- 加载提示区域 -->
        <div class="tip">
            <div
              v-loading="busy"
              element-loading-text="拼命加载中..."
              >
            </div>
          <p v-if="noMore">没有更多了~</p>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 分类查询参数
      queryInfo: {
        cur: '', // 当前页
        size: 3, // 条目
        categories: '我的' // 分类名
      },
      myqeryInfo: {
        cur: '',
        size: 3,
        flag: true
      },
      // 文章列表
      articleList: [],
      total: 0,
      // 分类名列表
      classList: [],

      count: 0,
      data: [],
      busy: false
    }
  },
  computed: {
    noMore () {
      return this.queryInfo.size >= this.total || this.myqeryInfo.size >= this.total
    },
    disabled () {
      return this.busy || this.noMore
    }
  },
  methods: {
    // 根据分类查询
    async getArticleListByCategories () {
      const { data: res } = await this.$http.get('/article/selectCategories',
        { params: this.queryInfo })
      console.log('分类文章', res)
      if (res.code !== 200) return this.$message.error('获取文章列表失败！')
      // 文章列表赋值
      this.articleList = res.data.list
      this.total = res.data.total
    },
    // 获取所有分类名
    async getClassList () {
      const { data: res } = await this.$http.get('/class/getNameList')
      if (res.code !== 200) return
      this.classList = res.data
    },
    // 获取用户的所有文章
    async getMyArticleList () {
      const { data: res } = await this.$http.get('/article/myselfArticleList', this.myqeryInfo)
      console.log('我的文章', res)
      if (res.code !== 200) {
        this.queryInfo.categories = '默认分类'
        this.getArticleListByCategories()
        return this.$message.warning('登陆后才能看到自己发布的文章！')
      }
      this.articleList = res.data.list
      this.total = res.data.total
    },
    // 改变分类名
    changeCate (newCate) {
      this.queryInfo.categories = newCate
      if (newCate === '我的') {
        this.getMyArticleList()
        return
      }
      // console.log(newCate)
      this.getArticleListByCategories()
    },
    // 懒加载
    loadMore () {
      this.busy = true
      setTimeout(async () => {
        if (this.queryInfo.categories === '我的') {
          this.myqeryInfo.size += 3
          const { data: res } = await this.$http.get('/article/myselfArticleList',
            { params: this.myqeryInfo })
          console.log('我的懒加载', res)
          this.articleList = res.data.list
          this.total = res.data.total
        } else {
          this.queryInfo.size += 3
          const { data: res } = await this.$http.get('/article/selectCategories',
            { params: this.queryInfo })
          // console.log(this.queryInfo.cur)
          // console.log(res)
          this.articleList = res.data.list
          this.total = res.data.total
        }

        this.busy = false
      }, 1500)
    }
  },
  created () {
    this.getClassList()
    this.queryInfo.categories = '我的'
    this.getMyArticleList()
  }
}
</script>

<style lang="less" scoped>

.blogClassify_box{
    min-height: 540px;
    padding: 1% 5%;
    div{
        // border:1px solid green;
    }
    .classify_list{
        position:fixed;
        // border: 1px solid black;
        width: 160px;
        // height: 50%;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        background: rgba(255, 255, 255, 0.2);
        padding: 2% 0;
        ul{
            padding: 0 !important;
            list-style: none;
            li{
                cursor: pointer;
                padding: 5% 2%;
                padding: 10px;
                text-align: center;
                // border:1px solid red;
                transition: all 0.8s;
                color: rgb(0, 174, 255);
            }
            li:hover{
              background: rgb(100, 230, 240);
              margin: 0 -5px;
              box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
              color:#fff;
            }
            .active_li{
              background: rgb(100, 230, 240);
              margin: 0 -5px;
              box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
              color:#fff;
            }
        }
    }

    .card_list{
        .el-card{
            background: rgba(255, 255, 255, 0.2);
            border-radius: 10px;
            // box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
            min-height: 200px;
            margin: 0 !important;
            margin-bottom: 5% !important;

            .card_title{
              a:hover{
                text-decoration: none;
              }
              span{
                color: #666;
                font-size: 1.6rem;
              }
              span:hover{
                color: rgb(89, 140, 250);
              }
            }
            .card_detail{
                width: 100%;
                font-size: 12px;
                color: #999;
                padding: 10px 0;
                .rol{
                    float: left;
                    margin-right: 8px;
                    i{
                        margin-right: 4px;
                    }
                    span{
                        margin-right: 5px;
                    }
                }
            }
            .card_desc{
                width: 100%;
                color: #555;
                font-size: 16px;
                line-height: 2;
                padding-top: 2%;

                p{
                  width: 85%;
                    overflow: hidden;
                    display: -webkit-box;//将元素设为盒子伸缩模型显示
                    -webkit-box-orient: vertical;//伸缩方向设为垂直方向
                    -webkit-line-clamp: 2;//超出3行隐藏，并显示省略号
                }
            }
        }
    }

    .tip{
      height: 50px;
      text-align: center;
    }
}

@media only screen and (max-width: 1000px){
    .col-md-2{
        .classify_list{
            z-index: 9;
            display: flex;
            align-items: center;
            li{
                float: left;
            }
        }
    }

}

body.modal-open {
  padding-right: 0 !important;
  overflow-y: scroll;
}
</style>
